<template>
  <div id="list">
    <!--
      :data="Datas.filter(
          data =>
            !search || data.title.toLowerCase().includes(search.toLowerCase())
        )"
    >-->
    <el-table stripe border :data="todoDatas.datas" :header-cell-style="getRowClass">
      <el-table-column label="Title" prop="title"></el-table-column>
      <el-table-column label="Content" prop="content"></el-table-column>
      <el-table-column label="Date" prop="date"></el-table-column>
      <el-table-column label="Level" prop="level">
        <template slot-scope="scope">
          <el-tag :type="tagTypes[scope.row.level]" size="mini">{{tagTexts[scope.row.level]}}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center" width="200px">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="通过todo内容搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            v-if="!scope.row.isDone"
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button>
          <el-button
            v-if="!scope.row.isDone"
            size="mini"
            type="danger"
            @click="handleDone(scope.row)"
          >Done</el-button>
          <el-button v-else size="mini" type="warning" @click="reDo(scope.row)">Redo</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="todoDatas.total"
      :page-size="todoDatas.pageSize"
    ></el-pagination>
    <el-dialog title="提示" :visible.sync="centerDialogVisible" width="40%" center>
      <formdialog @closeit="closeit" :formAdd="currentData"></formdialog>
    </el-dialog>
  </div>
</template>
<script>
import { setPages, hasDone } from "@/utils/utils.js";
import formdialog from "@/components/form";
export default {
  props: ["changedatas", "isdone"],
  name: "list",
  data() {
    return {
      centerDialogVisible: false,
      todoDatas: {},
      Datas: [],
      search: "",
      tagTypes: ["", "info", "success", "", "warning", "danger"],
      tagTexts: ["", "不紧急", "稍微紧急", "一般紧急", "紧急", "非常紧急"],
      currPage: 1,
      currentData: {}
    };
  },
  watch: {
    changedatas(val, old) {
      this.getData();
    },
    search(val, old) {
      this.getData();
    },
    isdone(val, old) {
      this.getData();
    }
  },
  mounted() {
    this.getData();
  },
  methods: {
    closeit(close) {
      this.centerDialogVisible = close;
      this.getData();
    },
    handleEdit(index, row) {
      this.centerDialogVisible = true;
      this.currentData = row;
    },
    getData() {
      if (localStorage.getItem("todo") !== "") {
        this.Datas = JSON.parse(localStorage.getItem("todo"));
        this.todoDatas = setPages(
          this.Datas,
          this.currPage,
          this.isdone,
          this.search
        );
      }
    },
    handleCurrentChange(val) {
      this.currPage = val;
      this.getData();
    },
    handleDone(data) {
      this.$confirm("此操作将完成此项目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          hasDone(data);
          var datas = JSON.parse(localStorage.getItem("todo"));
          this.todoDatas = setPages(
            datas,
            this.currPage,
            this.isdone,
            this.search
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return "background: #FAFAFA";
      } else {
        return "";
      }
    },
    reDo(data) {
      this.$confirm("确认重新设置为未完成？, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          hasDone(data, false);
          var datas = JSON.parse(localStorage.getItem("todo"));
          this.todoDatas = setPages(
            datas,
            this.currPage,
            this.isdone,
            this.search
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    }
  },
  components: {
    formdialog
  }
};
</script>
<style scoped>
</style>
